<template>
	<view class="page_box">
		<view class="search_box">
			<view class="s_b_l">
				<img src="/static/images/job/icon_search.png" mode="scaleToFill" alt="">
				<input type="text" v-model="inputText">
				<view class="txt_search" @tap="xilujobLists">搜索</view>
			</view>
			<view class="s_b_r" @tap="jump('/pages/job/message', { })">
				<span></span>
				<img src="/static/images/job/icon_job_msg.png" mode="scaleToFill" alt="">
			</view>
		</view>
		<view class="sel_box">
			<view class="sel_item" @tap="jump('/pages/job/filterCity', { })">
				<view>{{selectedCity||'香港'}}</view>
				<img src="/static/images/job/icon_down_black.png" mode="scaleToFill" alt="">
			</view>
			<view class="sel_item" @tap="jump('/pages/job/filterCriteria', { })">
				<view>篩選</view>
				<img src="/static/images/job/icon_down_black.png" mode="scaleToFill" alt="">
			</view>
		</view>
		<!-- 循环显示职位列表 -->
		<view class="job_box">
			<view class="job_li" v-for="(job, index) in jobList" :key="index"
				@tap="jump('/pages/job/details', { id: job.id,intro:job.enterpriseinfo.intro,company_scale_id:job.enterpriseinfo.company_scale_id})">
				<view class="l-title">
					<view>{{ job.job_name }}</view>
					<view class="l-t-r">{{ job.salary_text }}</view>
				</view>
				<view class="l-name">
					<span>{{ job.enterpriseinfo.full_name }}</span>
					<span>{{ job.company_scale_name }}</span>
				</view>
				<view class="l-desc">
					<view>{{ job.enterpriseinfo.intro }}</view>
				</view>
			</view>
		</view>


		<!-- 创建简历弹窗 -->
		<u-popup :show="showNotes" mode="center" border-radius="14" :mask-close-able="true" :mask="true">
			<view class="notes_con">
				<view class="n_title">創建在線簡歷</view>
				<view class="n_txt">快速填寫基本信息，溝通時將會向Boss展示，我們會妥善保護妳的隱私。</view>
				<img src="/static/images/job/icon_job_jl.png" mode="scaleToFill" alt="">
				<view class="btn-cj" @tap="jump('/pages/job/interviewCard', { })">去填寫</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		recommendJobs,
		companyScales,
		xilujobList
	} from '../../utils/api';
	export default {
		data() {
			return {
				showNotes: false,
				selectedCityID: '3717',
				selectedCity: '香港',
				inputText: '',
				jobList: [],
				filteredjs: '',
				min: '',
				max: ''
			};
		},
		onLoad(options) {
			
		},
		onShow() {
			// 获取存储的数据
			this.selectedCityID = uni.getStorageSync('selectedCityID');
			this.selectedCity = uni.getStorageSync('selectedCity');
			this.filteredjs = uni.getStorageSync('filteredjs');
			this.min = uni.getStorageSync('min');
			this.max = uni.getStorageSync('max');
			this.selectedCityList()
			
		},
		watch: {
			// 监听值变化
			selectedCityID(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.xilujobLists();
				}
			},
			filteredjs(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.xilujobLists();
				}
			},
			min(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.xilujobLists();
				}
			},
			max(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.xilujobLists();
				}
			}
		},
		methods: {
			jump(path, params) {
				this.$router.push({
					path,
					query: params
				});
			},

			async xilujobLists() {
				let res = await xilujobList({
					data: {
						q: this.filteredjs || this.inputText || '',
						salary_min: this.min || '',
						salary_max: this.max || ''
					},
					headers: {
						'cityid': Number(this.selectedCityID) || 3717, // 将 cityid 放在请求头
					},
				})
				uni.removeStorageSync('selectedCityID');
				uni.removeStorageSync('filteredjs');
				uni.removeStorageSync('min');
				uni.removeStorageSync('max');
				this.companyScales()
				// this.jobList = res.data.data
				console.log(res, 'kkiji')
			},
			async selectedCityList() {
				let res = await recommendJobs({
					data: {
						page: '1',
						pagesize: '10'
					},
					headers: {
						'cityid': Number(this.selectedCityID) || 3717, // 将 cityid 放在请求头
					},
				});
				this.jobList = res.data.jobs
			   await this.companyScales()
				console.log(this.jobList, 'l')
			},
			async companyScales() {
				let resListp = await companyScales();
				// 获取公司规模名称的映射
				const getCompanyScaleName = (scaleId) => {
					const scale = resListp.data.find(scale => scale.id === scaleId);
					return scale ? scale.name : '未知规模'; // 如果找不到对应的规模，返回 '未知规模'
				};

				// 遍历 jobList，修改每个职位对象，加入 company_scale_name
				this.jobList.forEach(job => {
					this.$set(job, 'company_scale_name', getCompanyScaleName(job.enterpriseinfo
						.company_scale_id));
				});
				console.log(this.jobList, 'ppooi'); // 打印修改后的 jobList
				this.jobList = [...this.jobList];
				console.log(this.jobList); // 打印修改后的 jobList
			},


		}


	};
</script>

<style lang="scss" scoped>
	.page_box {
		width: 100%;
		height: 90vh;
		background: #F4F6FA;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.search_box {
		width: calc(100% - 25px);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 5px 15px 0 10px;
		height: 35px;
	}

	.s_b_l {
		border-radius: 18px;
		background: #fff;
		height: 100%;
		width: calc(100% - 40px);
		display: flex;
		justify-content: space-between;
		align-items: center;

		img {
			width: 18px;
			height: 18px;
			display: block;
			margin-left: 20px;
			margin: 0 4px 0 10px;
		}

		input {
			width: calc(100% - 106px);
			height: 100%;
		}
	}

	.txt_search {
		width: 70px;
		height: 35px;
		text-align: center;
		line-height: 35px;
		border-radius: 18px;
		color: #fff;
		background: #1C7AF7;
		font-size: 14px;
	}

	.s_b_r {
		height: 100%;
		width: 40px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: relative;

		span {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background: #FF2B2B;
			position: absolute;
			top: 4px;
			right: -4px;
			display: block;
		}

		img {
			display: block;
			width: 20px;
			height: 20px;
		}
	}

	.sel_box {
		width: calc(100% - 60px);
		margin: 10px auto 5px;
		height: 21px;
		font-size: 15px;
		color: #333333;
		line-height: 21px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.sel_item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 30px;

		img {
			width: 10px;
			height: 6px;
			margin-left: 10px;
		}
	}

	.sel_item:last-child {
		margin-right: 0;
	}

	.job_box {
		width: calc(100% - 20px);
		margin: 0 auto;
	}

	.job_li {
		padding: 10px 20px;
		border-radius: 10px;
		background: #fff;
		font-size: 13px;
		color: #999999;
		line-height: 18px;
		margin: 10px auto 0;
	}

	.l-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: LucidaGrande, LucidaGrande;
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 18px;
	}

	.l-t-r {
		font-weight: 600;
		font-size: 16px;
		color: #1C7AF7;
		line-height: 22px;
	}

	.l-name {
		margin: 10px 0;
		font-size: 14px;
		color: #666666;
		line-height: 20px;

		span:last-child {
			margin-left: 10px;
		}
	}

	.l-desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: 40px;
		line-height: 18px;
	}

	.invite_con {
		width: 325px;
		height: 382px;
		background-image: url('./../../static/images/job/icon_job_invite.png');
		background-size: contain;
		background-repeat: no-repeat;
		text-align: center;
		position: relative;
	}

	.i_title {
		width: 100%;
		height: 20px;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 20px;
		color: #1C7AF7;
		line-height: 20px;
		margin: 12px 0 0;
	}

	.i_p {
		margin: 22px 0 10px;
		height: 18px;
		font-weight: 500;
		font-size: 18px;
		color: #333333;
		line-height: 18px;
	}

	.i_txt {
		height: 18px;
		font-weight: 500;
		font-size: 15px;
		color: #838383;
		line-height: 18px;
		margin-top: 10px;
	}

	.btn-i {
		width: 200px;
		height: 44px;
		border-radius: 8px;
		background: #fff;
		line-height: 44px;
		text-align: center;
		position: absolute;
		bottom: 51px;
		left: calc(50% - 100px);
		font-weight: 600;
		font-size: 15px;
		color: #1C7AF7;
	}

	.i_span {
		position: absolute;
		bottom: 16px;
		left: 0;
		right: 0;
		text-align: center;
		height: 20px;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 20px;
	}

	.notes_con {
		width: 265px;
		padding: 15px 20px;
		background: linear-gradient(180deg, #E9FCF6 0%, #E3EEFF 100%);
		border-radius: 10px;

		img {
			width: 154px;
			height: 110px;
			display: block;
			margin: 0 auto 30px;
		}
	}

	.n_title {
		height: 25px;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 25px;
		color: #333333;
		line-height: 38px;
	}

	.n_txt {
		font-weight: 500;
		font-size: 15px;
		color: #909FAF;
		line-height: 21px;
		margin: 18px auto 20px;
	}

	.btn-cj {
		width: 265px;
		height: 44px;
		border-radius: 8px;
		line-height: 44px;
		text-align: center;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
		background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
	}
</style>